Daha temiz ve verimli varsayılan değer atamaları için JavaScript'in nullish coalescing operatöründe (??) ustalaşın. OR operatöründen (||) farkını öğrenin ve pratik örnekleri inceleyin.
JavaScript Nullish Coalescing: Varsayılan Değer Ataması İçin Kapsamlı Bir Kılavuz
JavaScript'te varsayılan değerler atamak yaygın bir görevdir. Geleneksel olarak, geliştiriciler bu amaçla VEYA operatörünü (||
) kullanmışlardır. Ancak, ECMAScript 2020'de tanıtılan nullish coalescing operatörü (??
), özellikle null
veya undefined
değerlerle uğraşırken varsayılan değer atamalarını yönetmek için daha kesin ve güvenilir bir yol sunar. Bu kılavuz, nullish coalescing operatörünü derinlemesine inceler; sözdizimini, davranışını, VEYA operatöründen farklarını ve pratik kullanım alanlarını araştırır.
Nullish Coalescing Nedir?
Nullish coalescing operatörü (??
), sol tarafındaki işlenen null
veya undefined
olduğunda sağ tarafındaki işleneni döndüren mantıksal bir operatördür. Aksi takdirde, sol tarafındaki işleneni döndürür. Daha basit bir ifadeyle, yalnızca bir değişken kesinlikle null
veya undefined
olduğunda bir varsayılan değer sağlar.
Sözdizimi
Nullish coalescing operatörünün sözdizimi oldukça basittir:
leftOperand ?? rightOperand
Burada, leftOperand
null
veya undefined
olup olmadığını kontrol etmek istediğiniz değişken veya ifadedir ve rightOperand
ise leftOperand
'in gerçekten null
veya undefined
olması durumunda atamak istediğiniz varsayılan değerdir.
Örnek
Aşağıdaki örneği inceleyelim:
const username = null ?? "Guest";
console.log(username); // Çıktı: Guest
const age = undefined ?? 25;
console.log(age); // Çıktı: 25
const city = "London" ?? "Unknown";
console.log(city); // Çıktı: London
Bu örnekte, username
başlangıçta null
olduğu için varsayılan "Guest" değeri atanır. Benzer şekilde, age
başlangıçta undefined
olduğu için 25 değeri atanır. Ancak, city
ne null
ne de undefined
olduğu için orijinal değeri olan "London"ı korur.
Nullish ve Falsy Değerler
JavaScript'te nullish ve falsy değerler arasındaki farkı anlamak çok önemlidir. Bir nullish değer ya null
ya da undefined
'dır. Bir falsy değer ise Boolean bir bağlamda karşılaşıldığında false olarak kabul edilen bir değerdir. Falsy değerler şunları içerir:
null
undefined
0
(sıfır)NaN
(Sayı Değil)''
(boş dize)false
Temel ayrım, nullish coalescing operatörünün yalnızca null
veya undefined
'ı kontrol etmesi, VEYA operatörünün (||
) ise herhangi bir falsy değeri kontrol etmesidir.
??
ile ||
Arasındaki Fark
VEYA operatörü (||
), sol tarafındaki işlenen falsy ise sağ tarafındaki işleneni döndüren mantıksal bir VEYA operatörüdür. Varsayılan değerler atamak için kullanılabilse de, 0
veya boş bir dize gibi değerlerle uğraşırken beklenmedik davranışlara yol açabilir.
Örnek: ||
Operatörünün Tuzakları
const quantity = 0 || 10; // Miktar eksikse varsayılan olarak 10 atamak istiyoruz
console.log(quantity); // Çıktı: 10 (Beklenmedik!) çünkü 0 falsy bir değerdir
const text = '' || 'Default Text'; //Metin eksikse varsayılan bir metin atamak istiyoruz
console.log(text); // Çıktı: Default Text (Beklenmedik!) çünkü '' falsy bir değerdir
İlk örnekte, varsayılan 10 miktarını yalnızca quantity
eksik (null
veya undefined
) olduğunda atamak istiyorduk. Ancak, 0
falsy bir değer olduğu için VEYA operatörü varsayılan değeri yanlış bir şekilde atadı. Benzer şekilde, boş dize, dize var olsa bile (ama boş olsa da) varsayılan metnin gösterilmesine neden olur.
Hassasiyet için ??
Kullanımı
Önceki örneği nullish coalescing operatörünü kullanarak yeniden yazalım:
const quantity = 0 ?? 10;
console.log(quantity); // Çıktı: 0 (Doğru!)
const text = '' ?? 'Default Text';
console.log(text); // Çıktı: '' (Doğru!)
Şimdi, çıktı beklendiği gibi. Nullish coalescing operatörü yalnızca null
veya undefined
'ı kontrol eder, bu nedenle 0
ve ''
geçerli değerler olarak kabul edilir ve orijinal değerleri korunur.
Nullish Coalescing için Kullanım Alanları
Nullish coalescing operatörü, yalnızca bir değişkenin kesinlikle null
veya undefined
olduğu durumlarda varsayılan değerler sağlamanız gereken çeşitli senaryolarda kullanışlıdır. İşte bazı yaygın kullanım alanları:
1. İsteğe Bağlı Fonksiyon Parametrelerini Yönetme
İsteğe bağlı parametrelere sahip bir fonksiyon tanımlarken, parametreler sağlanmazsa varsayılan değerler sağlamak için nullish coalescing operatörünü kullanabilirsiniz.
function greet(name, greeting) {
const userName = name ?? "User";
const userGreeting = greeting ?? "Hello";
console.log(`${userGreeting}, ${userName}!`);
}
greet(); // Çıktı: Hello, User!
greet("Alice"); // Çıktı: Hello, Alice!
greet("Bob", "Greetings"); // Çıktı: Greetings, Bob!
2. Varsayılan Yapılandırma Seçeneklerini Ayarlama
Yapılandırma nesneleriyle çalışırken, belirli yapılandırma seçenekleri belirtilmemişse varsayılan değerlerin kullanılmasını sağlamak için nullish coalescing operatörünü kullanabilirsiniz.
const config = {
timeout: 5000,
retries: 3
};
function fetchData(options) {
const timeout = options.timeout ?? 10000; // 10 saniyelik varsayılan zaman aşımı
const retries = options.retries ?? 5; // Varsayılan 5 yeniden deneme
console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}
fetchData(config); // Çıktı: Timeout: 5000, Retries: 3
fetchData({}); // Çıktı: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Çıktı: Timeout: 10000, Retries: 5
3. İç İçe Nesne Özelliklerine Erişme
İç içe nesnelerin özelliklerine erişirken, ara özelliklerden herhangi biri null
veya undefined
ise varsayılan değerler sağlamak için nullish coalescing operatörü isteğe bağlı zincirleme (?.
) ile birleştirilebilir.
const user = {
profile: {
address: {
city: "New York"
}
}
};
const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Çıktı: New York
const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Çıktı: Unknown
4. API'ler ve Harici Verilerle Çalışma
API'lerden veya harici kaynaklardan veri çekerken, belirli veri alanları eksikse veya null
ya da undefined
değerlere sahipse varsayılan değerler sağlamak için nullish coalescing operatörü kullanılabilir. Farklı bölgelerden kullanıcı verileri almayı düşünün. Bazı bölgelerin kullanıcı verilerine `country` alanını dahil etmeyebileceğini varsayalım.
async function getUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
const country = data.country ?? "Unknown Country";
const timezone = data.timezone ?? "UTC";
console.log(`User is from: ${country}, Timezone: ${timezone}`);
} catch (error) {
console.error("Error fetching user data:", error);
}
}
// Farklı API yanıtlarını simüle etme:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };
// Bunu test etmek için gerçek bir API'ye veya sahte bir fetch'e ihtiyacınız olurdu.
// Gösterim amacıyla, yanıtları simüle edelim:
global.fetch = async (url) => {
if (url.includes("123")) {
return { json: async () => userWithCountry };
} else if (url.includes("456")) {
return { json: async () => userWithoutCountry };
}
throw new Error("Unexpected URL");
};
getUserData(123); // Çıktı: User is from: USA, Timezone: EST
getUserData(456); // Çıktı: User is from: Unknown Country, Timezone: GMT
Operatör Önceliği
Nullish coalescing operatörünün nispeten düşük bir operatör önceliği vardır. VEYA (||
) ve VE (&&
) operatörlerinden daha düşüktür. Bu nedenle, nullish coalescing operatörünü diğer mantıksal operatörlerle birleştirirken, işlem sırasını açıkça belirtmek için parantez kullanmak çok önemlidir. Bunu yapmamak sözdizimi hatalarına veya beklenmedik davranışlara neden olabilir.
Örnek: Anlaşılırlık için Parantez Kullanımı
// Parantez olmadan (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'
// Parantez ile (Doğru)
const result = false || (null ?? "Default");
console.log(result); // Çıktı: Default
const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Çıktı: null
İlk örnekte, parantez eksikliği bir SyntaxError
ile sonuçlanır çünkü JavaScript motoru amaçlanan işlem sırasını belirleyemez. Parantez ekleyerek, motora önce nullish coalescing operatörünü değerlendirmesini açıkça söyleriz. İkinci örnek geçerlidir; ancak, çıktı farklıdır çünkü önce `||` ifadesi değerlendirilir.
Tarayıcı Uyumluluğu
Nullish coalescing operatörü (??
) nispeten yeni bir özelliktir, bu nedenle özellikle eski tarayıcıları hedefliyorsanız tarayıcı uyumluluğunu göz önünde bulundurmak çok önemlidir. Çoğu modern tarayıcı, nullish coalescing operatörünü destekler, bunlar arasında:
- Chrome 80+
- Firefox 72+
- Safari 13.1+
- Edge 80+
- Node.js 14+
Daha eski tarayıcıları desteklemeniz gerekiyorsa, kodunuzu JavaScript'in uyumlu bir sürümüne dönüştürmek için Babel gibi bir transpiler kullanabilirsiniz. Babel, ??
operatörünü eski ortamlarda çalışan eşdeğer JavaScript koduna dönüştürecektir.
En İyi Uygulamalar
Nullish coalescing operatörünü etkili bir şekilde kullanmak için bazı en iyi uygulamalar şunlardır:
??
operatörünü nullish kontrolleri için kullanın: Yalnızca bir değişkennull
veyaundefined
olduğunda varsayılan bir değer sağlamak istediğinizde nullish coalescing operatörünü (??
) kullanın.- Karmaşık ifadeler için parantez kullanın: Nullish coalescing operatörünü diğer mantıksal operatörlerle birleştirirken, işlem sırasını net bir şekilde tanımlamak için parantez kullanın.
- Tarayıcı uyumluluğunu göz önünde bulundurun: Tarayıcı uyumluluğunu kontrol edin ve gerekirse eski tarayıcıları desteklemek için bir transpiler kullanın.
- Tutarlı bir şekilde kullanın: Proje genelinde daha öngörülebilir bir kodlama stili için uygun olan yerlerde
??
operatörünü benimseyin. - İsteğe bağlı zincirleme ile birleştirin: İç içe nesnelerin özelliklerine güvenli bir şekilde erişmek ve varsayılan değerler atamak için
??
operatörünü isteğe bağlı zincirleme?.
ile birlikte kullanın.
Global Hususlar
Global bir kitle için geliştirme yaparken, varsayılan değer atamalarıyla ilgili aşağıdaki noktaları göz önünde bulundurun:
- Yerelleştirme: Varsayılan değerlerin kullanıcının diline veya bölgesine göre yerelleştirilmesi gerekebilir. Örneğin, varsayılan bir para birimi simgesi veya tarih formatı.
- Kültürel Normlar: Belirli varsayılan değerlerin kültürel normlara göre ayarlanması gerekebilir. Örneğin, varsayılan bir selamlama mesajı farklı kültürlerde farklı olabilir.
- Erişilebilirlik: Varsayılan değerlerin engelli kullanıcılar için erişilebilir ve anlaşılır olduğundan emin olun. Kullanıcı arayüzlerinde varsayılan değerler için açık ve açıklayıcı etiketler sağlayın.
- Zaman Dilimleri ve Tarihler: Tarihler ve saatlerle çalışırken, varsayılan değerlerin farklı bölgelerdeki kullanıcılara doğru şekilde gösterilmesini sağlamak için uygun zaman dilimlerini ve tarih formatlarını kullanın.
Örnek: Nullish Coalescing ile Yerelleştirme
Kullanıcının yerel ayarına göre farklı dillerde varsayılan bir hoş geldiniz mesajı göstermek istediğinizi varsayalım. Yerelleştirilmiş bir mesaj mevcut değilse varsayılan bir mesaj sağlamak için nullish coalescing operatörünü kullanabilirsiniz.
function getWelcomeMessage(locale) {
const localizedMessages = {
en: "Welcome!",
fr: "Bienvenue !",
de: "Willkommen!"
};
const message = localizedMessages[locale] ?? "Welcome!"; // Yerel ayar bulunamazsa varsayılan olarak İngilizce
return message;
}
console.log(getWelcomeMessage("fr")); // Çıktı: Bienvenue !
console.log(getWelcomeMessage("es")); // Çıktı: Welcome! (Varsayılan olarak İngilizce'ye dönüyor)
Sonuç
Nullish coalescing operatörü (??
), JavaScript diline değerli bir ektir. VEYA operatörüne (||
) kıyasla, özellikle 0
veya boş dizeler gibi değerlerle uğraşırken varsayılan değerler atamak için daha kesin ve güvenilir bir yol sunar. Sözdizimini, davranışını ve kullanım alanlarını anlayarak, varsayılan değer atamalarını doğru bir şekilde yöneten daha temiz, daha sürdürülebilir kod yazabilirsiniz. Projelerinizde nullish coalescing operatörünü kullanırken tarayıcı uyumluluğunu, operatör önceliğini ve global hususları göz önünde bulundurmayı unutmayın.
Bu kılavuzda belirtilen en iyi uygulamaları takip ederek, JavaScript kodunuzun kalitesini ve güvenilirliğini artırmak için nullish coalescing operatöründen etkili bir şekilde yararlanabilir, kodunuzu daha sağlam ve anlaşılır hale getirebilirsiniz. Kodunuzda her zaman açıklığı ve sürdürülebilirliği önceliklendirmeyi unutmayın; nullish coalescing operatörü bu hedeflere ulaşmada güçlü bir araç olabilir.